<script type="text/javascript">
    (function ($) {
        let tableId = "#{{$table_id}}";
        let columnsData = '{{$columns|raw}}';
        let search = "{{$is_search|default='0'}}" === "1";
        let pagination = "{{$pagination|default=1}}" === "1";
        let cardView = "{{$card_view|default=0}}" === "1";
        let editable = "{{$editable|default=1}}" === "1";
        $(document).ready(function () {
            $(tableId).bootstrapTable({
                striped: true,
                showExport: true,
                exportTypes: ['excel', 'csv', 'json', 'xml', 'txt', 'sql'],
                /* basic, all, selected */
                exportDataType: 'selected',
                idTable: "advancedTable",
                advancedSearch: search,
                search: search,
                selectItemName: "{{$select_name|default='son[]'}}",
                toggle: "table",
                url: "{{$data_url|raw}}",
                method: "{{$method|default='post'}}",
                pagination: pagination,
                pageSize: "{{$page_size|default='10'}}",
                pageList: [10, 20, 50, 100, 500, "all"],
                sidePagination: "{{$side_pagination|default='server'}}",
                toolbar: "#{{$tool_id}}",
                showRefresh: true,
                cardView: cardView,
                showToggle: true,
                showColumns: true,
                idField: "{{$id_field|default='id'}}",
                editable: editable,
                editableUrl: "{{$edit_url|raw}}",
                editableEmptytext: "未设置",
                editableUndefinedtext: "-",
                clickToSelect: true,
                queryParams: function (params) {
                    let _searchId = "#{{$search_id}}";
                    params.search = $(_searchId).serialize();
                    return params;
                },
                columns: eval('(' + columnsData + ')')
            });
            setDataCardView(tableId);
        });
        $(window).resize(function () {
            setDataCardView(tableId);
        });
        
        function setDataCardView(id) {
            let options = $(id).bootstrapTable('getOptions');
            if ($(window).width() < 768) {
                if (options.cardView === false) {
                    $(id).bootstrapTable('toggleView');
                }
            } else {
                if (options.cardView === true) {
                    $(id).bootstrapTable('toggleView');
                }
            }
        }
    }(window.jQuery));
</script>